<div class="m-portlet m-portlet--mobile">
    <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">
                    {{l("OrganizationTree")}}
                </h3>
            </div>
        </div>
        <div class="m-portlet__head-tools">
            <button *ngIf="isGranted('Pages.Administration.OrganizationUnits.ManageOrganizationTree')" (click)="addUnit(null)" class="btn btn-primary">
                <i class="fa fa-plus"></i> {{l("AddRootUnit")}}
            </button>
        </div>
    </div>
    <div class="m-portlet__body">
        <div #tree></div>
        <div *ngIf="!totalUnitCount" class="text-muted">
            {{l("NoOrganizationUnitDefinedYet")}}
        </div>
    </div>
</div>

<createOrEditOrganizationUnitModal #createOrEditOrganizationUnitModal (unitCreated)="unitCreated($event)" (unitUpdated)="unitUpdated($event)"></createOrEditOrganizationUnitModal>
